@extends('layouts.master')

@section('title')
    Nueva cancha
@stop

@section('content')

<!-- show form errors -->
{{ HTML::ul($errors->all()) }}

<!-- create field form -->
<div class="row">
        <div>
          <section class="panel">
            <div class="panel-body">
			{{ Form::open(array('url' => 'fields')) }}
			
				<input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
				
				<div class="form-group col-lg-6">
					{{ Form::label('name', 'Nombre') }}
					{{ Form::text('name', Input::old('name'), array('class' => 'form-control')) }}
				</div>
			
				<div class="form-group col-lg-6">
					{{ Form::label('address', 'Dirección') }}
					{{ Form::text('address', Input::old('address'), array('class' => 'form-control')) }}
				</div>
				
				<div class="form-group col-lg-6">
					{{ Form::label('town', 'Localidad') }}
					{{ Form::text('town', Input::old('town'), array('class' => 'form-control')) }}
				</div>
				
				<div class="form-group col-lg-6">
					{{ Form::label('state', 'Provincia') }}
					{{ Form::text('state', Input::old('state'), array('class' => 'form-control')) }}
				</div>
				
				<div class="form-group col-lg-6">
					{{ Form::label('country', 'País') }}
					{{ Form::text('country', Input::old('country'), array('class' => 'form-control')) }}
				</div>
				
				<div class="form-group col-lg-6">
					{{ Form::label('contact', 'Info de contacto') }}
					{{ Form::text('contact', Input::old('contact'), array('class' => 'form-control')) }}
				</div>
			
				<div class="form-group col-lg-6">
					{{ Form::label('price', 'Precio') }}
					{{ Form::input('number', 'price', null, array('class' => 'form-control', 'step' => 'any', 'min' => '0')) }}
				</div>
				
				<div class="form-group col-lg-6">
					{{ Form::label('matchTypes', 'Tipos de partido') }}
					<div>
						@foreach($matchTypes as $key => $value)
							<label class="checkbox-inline">
								{{ Form::checkbox('matchTypes[]', $value->id, false); }} {{ $value->name }} 
							</label>
						@endforeach
					</div>
				</div>
				
				<div class="form-group col-lg-12" style="height: 300px;">
					<div id="map_canvas" style="width: 100%; height: 100%;"></div>
					{{ Form::input('hidden', 'latitude', null, array('id' => 'latitude')) }}
					{{ Form::input('hidden', 'longitude', null, array('id' => 'longitude')) }}
				</div>
				
				<div class="form-group" style="clear: both;">
					<a class="btn btn-default" href="{{ URL::to('fields') }}">&lt;&lt; Volver</a>
					{{ Form::submit('Guardar', array('class' => 'btn btn-primary')) }}
				</div>
				
			{{ Form::close() }}
			</div>
		</section>
	</div>
</div>
@stop

@section('scripts')
<script type="text/javascript">
	var map;
	var geocoder;
	var marker;
	$(document).ready(function(){
		initialize();

		$("#address").blur(function(){
			searchAddress();
		});
		$("#town").blur(function(){
			searchAddress();
		});
		$("#state").blur(function(){
			searchAddress();
		});
		$("#country").blur(function(){
			searchAddress();
		});
	});

	function initialize() {
		geocoder = new google.maps.Geocoder();
	  	var mapOptions = {
	    	zoom: 8,
	    	center: new google.maps.LatLng(-34.397, -58.644),
	    	mapTypeId: google.maps.MapTypeId.ROADMAP
	  	}
	  	map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
	}

	function searchAddress() {
		var fullAddress = "";
		var address = document.getElementById('address').value + ", ";
		var town = document.getElementById('town').value + ", ";
		var state = document.getElementById('state').value + ", ";
		var country = document.getElementById('country').value + ", ";

		if(address != "")
			fullAddress += address;
		if(town != "")
			fullAddress += town;
		if(state != "")
			fullAddress += state;
		if(country != "")
			fullAddress += country;
		fullAddress = fullAddress.substring(0, fullAddress.length - 2);
		
		geocoder.geocode( { 'address': fullAddress}, function(results, status) {
			if (status == google.maps.GeocoderStatus.OK) {
				if(marker != null)
		     		marker.setMap(null);
			  	map.setCenter(results[0].geometry.location);
		      	map.setZoom(14);
		      	marker = new google.maps.Marker({
		          	map: map,
		          	position: results[0].geometry.location
		      	});
	
		      	var lat = results[0].geometry.location.k;
		      	var lng = results[0].geometry.location.B;
		      	$('#latitude').val(lat);
		      	$('#longitude').val(lng);
			      
			} else {
		    	alert('No se pudo geolocalizar la dirección ingresada: ' + status);
		    }
		});
	}
	
</script>	
@stop